<template>
	<uni-section>
		<uni-search-bar @confirm="search" :focus="true" v-model="searchKeyword" placeholder="请输入用户名搜索"
			@input="handleInputChange" @clear="clearSearch">
		</uni-search-bar>
		<view class="search-result">
			<template v-if="searchResult.length">
				<uni-card @click="PostComments()" v-for="(user, index) in searchResult" :key="index"  :title="user.username"
					:isFull="true" :sub-title="user.role" extra="发布时间:2024-10-10"
					thumbnail="/static/exam-index/paper.png">
					<text class="uni-body">{{ user.content }}</text>
				</uni-card>
			</template>
			<template v-else>
				<text class="no-user-message">无该用户信息</text>
			</template>
		</view>
	</uni-section>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '', 
				users: [ 
					{
						username: 'Alice',
						role: 'User',
						content: '内容1111111111111111'
					},
					{
						username: 'Bob',
						role: 'Admin',
						content: '内容2222222222222222'
					},
				],
				searchResult: []
			};
		},
		methods: {
			search() {
				this.handleInputChange();
			},
			handleInputChange() {
				const keyword = this.searchKeyword.trim().toLowerCase();
				if (!keyword) {
					this.searchResult = this.users;
				} else {
					this.searchResult = this.users.filter(user =>
						user.username.toLowerCase().includes(keyword)
					);
				}
			},
			clearSearch() {
				this.searchKeyword = '';
				this.searchResult = [];
			},
			PostComments(){
				uni.navigateTo({
					url: '/pagesTwo/PostingDetails/PostingDetails'
				});
			}
		},
		mounted() {
			this.searchResult = this.users;
		}
	}
</script>